import React, { Component } from 'react';
import {
	View, Text, StyleSheet, TextInput, Alert, KeyboardAvoidingView, Platform, ScrollView
} from 'react-native';
import ValidateDataUtil from '../../../utils/ValidateDataUtil';
import { GLOBAL } from '../../../config/global';
import { enterpriseStyles } from '../_common/enterpriseStyle';
import { LargeBtn } from '../../../component/Store.js';
import { Common } from '../../../component/common/Common.js'

const scale = GLOBAL.SCALE;
let sendDataholl;

export class InvoiceEditPage extends Component {

	static navigationOptions = ({ navigation }) => {
		const params = navigation.state.params || {};
		sendDataholl = params.vo;
		return {
			header: null
		};
	};

	constructor(props) {
		super(props);
		this.state = {}
		this.sendData = this.props.navigation.state.params.vo;
		this.sendDataChange = {};
		this.sendDataChange.index = sendDataholl.index;
		this.sendDataChange.openAcctNo = sendDataholl.openAcctNo;
		this.sendDataChange.openBankName = sendDataholl.openBankName;
		this.sendDataChange.taxCode = sendDataholl.taxCode;
		this.sendDataChange.invoicePhoneNo = sendDataholl.invoicePhoneNo;
		this.sendDataChange.invoiceAddress = sendDataholl.invoiceAddress;

		this.creditCode = this.props.navigation.state.params.creditCode;
		this.bankLabel = this.props.navigation.state.params.bankLabel;
		this._didPressBtn = this._didPressBtn.bind(this);

		if (!this.sendData.taxCode) {
			this.sendData.taxCode = this.props.navigation.state.params.creditCode;
		}
	}

	render () {
		const { taxCode, openBankName, openAcctNo, invoicePhoneNo, invoiceAddress } = this.sendData;
		const openAcctNoStr = taxCode ? taxCode : this.creditCode;
		return (
			<KeyboardAvoidingView style={styles.container} behavior={Platform.OS === 'ios' ? 'padding' : null} keyboardVerticalOffset={20}>
				<ScrollView style={styles.wrap} keyboardShouldPersistTaps={'handled'}>
					<Common type="headCloes" callBack={() => {
						const { navigate } = this.props.navigation;
						navigate('EnterpriseCreateAdditionInfo', {
							invoiceData: this.sendDataChange,
						});
					}} imgStyle={{ marginBottom: 14 * scale }} />
					<Text style={enterpriseStyles.titleText}>开票信息</Text>

					<View style={enterpriseStyles.field}>
						<Text style={enterpriseStyles.lableText}>纳税人识别号({this.bankLabel})</Text>
						<TextInput
							ref="taxCodeInput"
							style={enterpriseStyles.textInput}
							underlineColorAndroid='transparent'
							returnKeyType='done'
							placeholder={"请输入纳税人识别号"}
							placeholderTextColor="#404040"
							maxLength={100}
							editable={true}
							defaultValue={openAcctNoStr}
							keyboardType='numeric'
							onChangeText={(txt) => {
								this.sendData.taxCode = txt;
							}}
						/>
					</View>
					<View style={enterpriseStyles.field}>
						<Text style={enterpriseStyles.lableText}>开户帐号({this.bankLabel})</Text>
						<TextInput
							ref="openAcctNoInput"
							style={enterpriseStyles.textInput}
							underlineColorAndroid='transparent'
							returnKeyType='done'
							placeholder={"请输入开户行帐号"}
							placeholderTextColor="#404040"
							maxLength={100}
							editable={true}
							defaultValue={openAcctNo}
							keyboardType='numeric'
							onChangeText={(txt) => {
								this.sendData.openAcctNo = txt;
							}}
						/>
					</View>
					<View style={enterpriseStyles.field}>
						<Text style={enterpriseStyles.lableText}>开户银行({this.bankLabel})</Text>
						<TextInput
							ref="openBankNameInput"
							style={enterpriseStyles.textInput}
							underlineColorAndroid='transparent'
							returnKeyType='done'
							keyboardType='default'
							placeholder={"请输入开户行"}
							placeholderTextColor="#404040"
							maxLength={100}
							editable={true}
							defaultValue={openBankName}
							onChangeText={(txt) => {
								this.sendData.openBankName = txt;
							}}
						/>
					</View>
					<View style={enterpriseStyles.field}>
						<Text style={enterpriseStyles.lableText}>开票电话({this.bankLabel})</Text>
						<TextInput
							ref="invoicePhoneNoInput"
							style={enterpriseStyles.textInput}
							underlineColorAndroid='transparent'
							returnKeyType='done'
							keyboardType='default'
							placeholder={"请输入开票电话"}
							placeholderTextColor="#404040"
							maxLength={100}
							editable={true}
							defaultValue={invoicePhoneNo}
							onChangeText={(txt) => {
								this.sendData.invoicePhoneNo = txt;
							}}
						/>
					</View>
					<View style={enterpriseStyles.field}>
						<Text style={enterpriseStyles.lableText}>开票地址({this.bankLabel})</Text>
						<TextInput
							multiline={true}
							ref="invoiceAddressInput"
							style={enterpriseStyles.textInput}
							underlineColorAndroid='transparent'
							returnKeyType='done'
							blurOnSubmit={true}
							keyboardType='default'
							placeholder={"请输入开票地址"}
							placeholderTextColor="#404040"
							maxLength={100}
							editable={true}
							defaultValue={invoiceAddress}
							onChangeText={(txt) => {
								this.sendData.invoiceAddress = txt;
							}}
						/>
					</View>
				</ScrollView>
				<LargeBtn text={'保存'} cellStyles={{ position: 'absolute', bottom: 0 }} onPress={this._didPressBtn} />
			</KeyboardAvoidingView>
		);
	}

	_didPressBtn () {
		const { openBankName, openAcctNo, taxCode, invoicePhoneNo, invoiceAddress } = this.sendData;
		if (ValidateDataUtil.isEmpty(taxCode)) {
			this.refs.taxCodeInput.focus();
			Alert.alert('请填写纳税人识别号');
			return;
		}
		if (ValidateDataUtil.isEmpty(openBankName)) {
			this.refs.openBankNameInput.focus();
			Alert.alert('请填写开户行');
			return;
		}
		if (ValidateDataUtil.isEmpty(openAcctNo)) {
			this.refs.openAcctNoInput.focus();
			Alert.alert('请填写开户行帐号');
			return;
		}
		if (ValidateDataUtil.isEmpty(invoicePhoneNo)) {
			this.refs.invoicePhoneNoInput.focus();
			Alert.alert('请填写开票电话');
			return;
		}
		if (ValidateDataUtil.isEmpty(invoiceAddress)) {
			this.refs.invoiceAddressInput.focus();
			Alert.alert('请填写开票地址');
			return;
		}

		const { navigate } = this.props.navigation;
		navigate('EnterpriseCreateAdditionInfo', {
			invoiceData: this.sendData,
		});
	}
}

const styles = StyleSheet.create({
	scrollView: {
		flex: 1,
		backgroundColor: '#fff',
	},
	container: {
		flex: 1,
		alignItems: 'center',
		backgroundColor: '#fff',
	},
	wrap: {
		height: GLOBAL.SCREEN_HEIGHT - 120,
		width: 345 * scale,
	},
	closeText: {
		fontSize: 36 * scale,
		color: '#000'
	},
	closeTextCell: {
		position: 'absolute',
		left: 8,
		top: 0,
	},

})